<template>
    <div>
        <div class="echartBox">
            <div id="chart" style="width: 100%;height: 350px;"></div> 
        </div>
        <div class="tableBox">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" highlight-current-row :isShowPage="false" :current="false" max-height="660px" />
        </div>
    </div>
</template>


<script>
import * as echarts from "echarts";
export default {
    name: 'Xszst',
    props: {
        rowData: {
            type: Object, default: function () {
                return {}
            }
        },
        

    },
    data() {
        return {
            loading: false,
            option: {
                title: {},
                tooltip: {
                    trigger: 'item',
                    formatter: '{d}%'
                },
                legend: {
                    orient: 'vertical',
                    itemWidth: 18,
                    itemHeight: 14,
                    icon: "rect",
                    top: '15%',
                    textStyle: {
                        'color': '#000',
                        fontSize: 15

                    },
                    data: ['长沙市武广新城开发建设有限责任公司', '大有期货有限公司', '湖南现代环境科技股份有限公司',
                        '中国建设银行股份有限公司长沙铁银支行',
                        '现代投资股份有限公司长沙现代凯莱大酒店',
                        '北京中电信联科技发展有限公司', '国科清源(北京)环保新技术有限公司',
                        '湖南省现代融资担保有限公司', '邻里家（北京）商贸有限公司', '北京全时叁陆伍连锁便利店有限公司'
                    ],
                    left: '60%', //图例距离左的距离
                },
                series: [{
                    name: 'TOP10 客户交易占比',
                    type: 'pie',
                    radius: '60%',
                    center: ['40%', '50%'], //距离左右，上下距离的百分比
                    data: [{
                        value: 1048,
                        name: '长沙市武广新城开发建设有限责任公司'
                    }, {
                        value: 735,
                        name: '大有期货有限公司'
                    }, {
                        value: 735,
                        name: '湖南现代环境科技股份有限公司'
                    }, {
                        value: 735,
                        name: '中国建设银行股份有限公司长沙铁银支行'
                    }, {
                        value: 735,
                        name: '现代投资股份有限公司长沙现代凯莱大酒店'
                    }, {
                        value: 735,
                        name: '北京中电信联科技发展有限公司'
                    }, {
                        value: 735,
                        name: '国科清源(北京)环保新技术有限公司'
                    }, {
                        value: 735,
                        name: '湖南省现代融资担保有限公司'
                    }, {
                        value: 735,
                        name: '邻里家（北京）商贸有限公司'
                    }, {
                        value: 735,
                        name: '北京全时叁陆伍连锁便利店有限公司'
                    }

                    ],
                    label: {

                        normal: {
                            show: true,
                            formatter: '{d}%',
                            testStyle: {
                                fontSize: 15
                            }
                        }


                    },

                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            }
            ,
            tableColumns: [
                {
                    label: '客户',
                    prop: 'qymc',
                    align: 'center',

                },
                {
                    label: '交易金额(元)',
                    prop: 'jshj',
                    align: 'center',

                },
                {
                    label: '交占比',
                    prop: 'jzb',
                    align: 'center',

                }
            ],
            tableDatas: []
        }
    },
    watch: {
        rowData: {
            handler(newVal, oldVal) {
                this.initChart(newVal)
                this.tableDatas = newVal.tableData
                console.log('user对象发生了变化', newVal, oldVal);
            },
            deep: true,
            immediate: true
        }
    },
    methods:{
          initChart(newVal) {
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            newPromise.then(() => {
                //	此dom为echarts图标展示dom
                this.chart = echarts.init(document.getElementById('chart'));
                const option = {
                title: {},
                tooltip: {
                    trigger: 'item',
                    formatter: '{d}%'
                },
                legend: {
                    orient: 'vertical',
                    itemWidth: 18,
                    itemHeight: 14,
                    icon: "rect",
                    top: '15%',
                    textStyle: {
                        'color': '#000',
                        fontSize: 15

                    },
                    data: newVal.charData.legendData,
                    left: '60%', //图例距离左的距离
                },
                series: [{
                    name: 'TOP10 客户交易占比',
                    type: 'pie',
                    radius: '60%',
                    center: ['40%', '50%'], //距离左右，上下距离的百分比
                    data: newVal.charData.seriesData,
                    label: {

                        normal: {
                            show: true,
                            formatter: '{d}%',
                            testStyle: {
                                fontSize: 15
                            }
                        }


                    },

                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
                this.chart.setOption(option);
            })


        },
    }
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-bottom: 15px;
    border: 1px solid rgb(221, 221, 221);
}
</style>